<template>
	<view class="jq22-flexView">
		<view class="jq22-scrollView">
			<view class="jq22-head-bg">
			    <view class="jq22-flex">
			        <view class="jq22-flex-box">
			            <h2><text>{{userName}}</text>, 您好！</h2>
			            <h3>欢迎使用<text style="font-size: 48rpx;">{{orgName}}</text>生产管理系统</h3>
			        </view>
			    </view>
			</view>
			<view class="divHeight"></view>
			<view class="jq22-flex" style="margin-top: 100rpx; text-align: center;">
			    <view class="button-top primary" v-if="role == 'Administrator'" >
					<view class="title">
						<u-icon top="2" name="checkmark-circle" style="margin-right: 10px;"></u-icon>
						已完成
					</view>
					<view class="number">{{orderCount.value1}}</view>
				</view>
				<view class="button-top dark" v-if="role == 'Administrator'" >
					<view class="title">
						<u-icon top="2" name="checkmark-circle" style="margin-right: 10px;"></u-icon>
						未完成
					</view>
					<view class="number">{{orderCount.value2}}</view>
				</view>
			</view>
			<view class="jq22-flex">
			    <x-button type="warning" shadow  @click="scanCode()" :ripple="true" ripple-bg-color="#eee" class="button-center" v-if="role == 'Administrator'" >
					<u-icon name="scan" style="margin-right: 5px;"></u-icon>
					扫一扫
				</x-button>
				<x-button type="success" shadow  @click="openChangePassword()" :ripple="true" ripple-bg-color="#eee" class="button-center">
					<u-icon name="setting" style="margin-right: 5px;"></u-icon>
					修改密码
				</x-button>
				<x-button type="primary" shadow @click="logout()" :ripple="true" ripple-bg-color="#eee" class="button-center">
					<u-icon size="25" name="../../static/img/icon/logout.png" style="margin-right: 5px;"></u-icon>
					退出登录
				</x-button>
			</view>
			
			<view class="divHeight"></view>
			<view style="padding: 25px;">

				
			</view>
		</view>
	</view>
</template>

<script>
	import xButton from '@/components/x-ubutton/x-ubutton.vue' //由于uview采用了easycom，改为x-
	export default {
		components:{
		    xButton
		},
		data() {
			return {
				loginName:'',
				userId:'',
				orgName:'',
				role:'',
				deptId:'',
				userName:'',
				orderCount:{},
			}
		},
		onLoad() {
			this.role = uni.getStorageSync('roleKey');
			this.loginName = uni.getStorageSync('loginName');
			this.userName = uni.getStorageSync('userName');
			this.userId = uni.getStorageSync('userId');
			this.orgName = uni.getStorageSync("orgName");
			this.deptId = uni.getStorageSync("deptId");
			this.checkLogin();
			this.getOrderCount();
		},
		methods: {
			logout(){
				uni.showModal({
					title: '提示',
					content: '是否确定退出应用',
					success: function (res) {
						if (res.confirm) {
							uni.setStorageSync('userId', '');
							uni.setStorageSync('deptId', '');
							uni.setStorageSync('roleKey', '');
							uni.setStorageSync('loginName', '');
							uni.setStorageSync('password', '');
							uni.reLaunch({
								url: '/pages/login/login'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getOrderCount(){
				this.$http
					.post('/rest/getOrderCount', {
						deptId: this.deptId
					})
					.then(res => {
						if (res.data.code == '0') {
							this.orderCount = res.data.data
						}
					});
			},
			scanCode(){
				let that = this;
				uni.scanCode({
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
						that.$u.route({
							url: '/pages/order-info/index',
							params: {
								orderId: res.result,
								status: '999'
							}
						});
				    }
				});
			},
			openChangePassword(){
				this.$u.route({
					url: '/pages/center/index',
				});
			}
		}
	}
</script>

<style lang="css">
	@import "/static/css/index.css";
</style>
<style lang="scss">
	.button-top{
		height: 150rpx;
		width: 250rpx;
		color: #FFFFFF;
		text-align: center;
		padding-top: 40rpx;
		margin: auto;
		.title{
			font-size: 30rpx;
		}
		.number{
			margin-top: 10rpx;
			font-weight: bold;
		}
	}
	.primary{
		border-radius: 12rpx;
		background-color: $u-type-primary;
		box-shadow: 3rpx 5rpx 20rpx 0rpx $u-type-primary;
	}
	.dark{
		border-radius: 12rpx;
		background-color: $u-type-error-dark;
		box-shadow: 3rpx 5rpx 20rpx 0rpx $u-type-error-dark;
	}
	.button-center{
		width: 200rpx;
	}
</style>